<template>
  <TitleBox :title="title" :imgsrc="imgsrc"/>
  <div class="label-container">
    <div class="tab-container">
      <button class="tab" type="button" @click="showAllData">全部</button>
    </div>
    <div class="tab-container">
      <button class="tab" type="button" @click="showData('day1')">Day1</button>
    </div>
    <div class="tab-container">
      <button class="tab" type="button" @click="showData('day2')">Day2</button>
    </div>
    <div class="tab-container">
      <button class="tab" type="button" @click="showData('day3')">Day3</button>
    </div>
  </div>
  <ul class="expert-list">
    <li v-for="expert in exports" class="single-expert"
        v-show="expert.date === selectedDate || selectedDate === null">
      <img :src="expert.imgUrl" class="expert-img">
      <h2 class="expert-name">{{ expert.name }}</h2><br>
      <p class="expert-position">{{ expert.position }}</p>
    </li>
  </ul>
  <div class="sizedbox" style="height:10vh;"></div>
</template>

<style scoped lang="scss" name="Expert">
.label-container {
  width: 100%;
  height: 3.125vw;
  display: flex;
  flex-grow: 1;
  overflow: hidden;
  z-index: 1;

  .tab-container {
    padding-right: 2.6042vw;

    .tab {
      border-radius: 1.0417vw;
      border: solid black .1042vw;
      width: 6.25vw;
      height: 3.125vw;
      background-color: #fff;
      justify-content: center;
      font-size: .8333vw;
      font-weight: 700;
      letter-spacing: 0.1vw;
      cursor: pointer;
    }

    .tab:hover {
      background-color: #2997ff;
    }
  }
}

.expert-list {
  width: 100%;
  margin-top: 5vw;
  height: auto;
  display: flex;
  overflow: hidden;
  z-index: 1;
  flex-wrap: wrap;
  justify-content: flex-start;

  .single-expert {
    flex: 0 0 20%;
    height: 15.625vw;
    margin-bottom: 2.0833vw;
    overflow: hidden;
    text-align: center;

    .expert-img {
      width: 9.8438vw;
      height: 9.8438vw;
      border-radius: 15.625vw;
    }

    .expert-name {
      margin-top: 1.5vw;
      font-size: 1.4583vw;
      letter-spacing: 0.15vw;
    }

    .expert-position {
      font-size: 0.8vw;
      color: #80868B;
      letter-spacing: 0.02vw;
    }
  }
}
</style>

<script setup lang="ts" name="Expert">
import {ref, computed, onMounted, reactive} from 'vue';
import axios from 'axios';
import TitleBox from '@/components/titlebox.vue';
import img from '@/assets/expert/expert_welcome.png'

const title = ref('大咖云集')
const imgsrc = img

const selectedDate = ref<string | null>(null);


interface Expert {
  id: string,
  name: string;
  date?: string;
  imgUrl: string;
  position: string;
}


// const experts = ref<Expert[]>([]);
const exports = reactive<Expert[]>([
  {
    id: '01',
    name: '范渊',
    imgUrl: 'https://img2023.gcsis.cn/2023/4/1a80708d46f64e079919a2c93a6aa7c4.png',
    position: '安恒董事长',
    date: 'day2'
  },
  {
    id: '02',
    name: '刘世锦',
    imgUrl: 'https://img2023.gcsis.cn/2023/4/3976ced942c44672b457895baa4e33e8.png',
    position: '国务院发展研究中心原副主任、中国发展研究基金会副理事长',
  },
  {
    id: '03',
    name: '沈昌祥',
    imgUrl: 'https://img2023.gcsis.cn/2023/4/c113813fe5414f2e9aa7cee9a4d1030e.png',
    position: '中国工程院院士',
  },
  {
    id: '04',
    name: '邬贺铨',
    imgUrl: 'https://img2023.gcsis.cn/2023/4/e64b9555a46c4291a0a654a97ebce5ba.png',
    position: '中国工程院院士',
    date: 'day1'
  },
  {
    id: '05',
    name: '谭晓生',
    imgUrl: '	https://img2023.gcsis.cn/2023/4/aa1635e18de24d88b86753e1ca39a05e.png',
    position: '北京赛博英杰科技有限公司董事长',
    date: 'day2'
  },
]);
/*onMounted(async () => {
  try {
    const response = await axios.get('/api/expert'); // 假设后端接口是 /api/expert
    experts.value = response.data;
  } catch (error) {
    console.error('Failed to fetch experts data:', error);
  }
});*/
const showData = (date: string) => {
  selectedDate.value = date;
};

const showAllData = () => {
  selectedDate.value = null;
};

const filteredExpert = computed(() => {
  if (selectedDate.value === null) {
    return experts.value;
  }
  return experts.value.filter(expert => expert.date === selectedDate.value);
});

</script>